<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-pre,v-cloak,v-once 实例练习</title>
    <script type="text/javascript" src="../assets/vue.js"></script>

</head>
<body>

<div id="app">
    <h3> {{message}}</h3>
    <hr>
    <h3 v-pre> {{message}}</h3>
    <h3 v-cloak> {{message}}</h3>
    <h3 v-once> {{message}}</h3>

    <input type="text" v-once v-model="message">

</div>

<script>
    //v-pre 原样输出 不解析
    //v-cloak  整个渲染完成后 才 显示
    //v-once 只渲染一次 下次 改变 不会再次渲染
    var data = {
        message:"v-pre,v-cloak,v-once练习",

    };
    var app = new Vue({
        el:'#app',
        data:data
    });

</script>

</body>
</html>